<template>
    <div id="map" class="map"></div>
</template>

<script>
    //引入依赖
    import {Map, View} from 'ol'
    import OSM from 'ol/source/OSM'
    import TileLayer from 'ol/layer/Tile'

    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        mounted() {
            this.initMap()
        },
        methods: {
            initMap() {
               new Map({
                    target: 'map',
                    layers: [
                        new TileLayer({
                            source: new OSM()
                        })
                    ],
                    view: new View({
                        center: [113.24981689453125, 23.126468438108688], //视图中心位置
                        projection:"EPSG:4326", //指定投影
                        zoom: 18
                    })
                });
            }
        }
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }
</style>
